<style lang="less">
.search {
  .operation {
    margin-bottom: 2vh;
  }
  .preview {
    font-weight: 600;
    color: #40a9ff;
    cursor: pointer;
  }
}
</style>
<template>
  <div class="search">
    <Card>
      <Row class="operation" align="middle">
        <span>组件英文名：</span>
        <Tooltip
          content="生成的请求api文件中将使用该组件名拼接，建议驼峰法命名"
          placement="right"
          transfer
          max-width="250"
        >
          <Input
            v-model="vueName"
            clearable
            style="width: 150px; margin-right: 10px"
          />
        </Tooltip>
        <span>表单显示：</span>
        <Select
          v-model="rowNum"
          transfer
          style="width: 150px; margin-right: 10px"
        >
          <Option value="1">一行一列</Option>
          <Option value="2">一行两列</Option>
          <Option value="3">一行三列</Option>
          <Option value="4">一行四列</Option>
        </Select>
        <Button @click="add" type="primary" icon="md-add">添加字段</Button>
        <Button @click="entityModal = true" type="warning" icon="ios-construct"
          >读取字段</Button
        >
        <Button
          @click="generate"
          :loading="loading"
          type="success"
          icon="md-send"
          >生成代码</Button
        >
        <Button @click="clear" icon="md-trash">清空全部</Button>
      </Row>
      <Alert show-icon>
        将生成的代码复制粘贴至XBoot前端新建的空白组件中，再做少许修改并自行调通接口即可
        <span @click="preview" class="preview">增删改表格预览</span>
      </Alert>
      <Table border :columns="columns" :data="data" ref="table">
        <template slot-scope="{ row }" slot="field">
          <Input v-model="row.field" @on-blur="changeField(row, $event)" />
        </template>
        <template slot-scope="{ row }" slot="name">
          <Input v-model="row.name" @on-blur="changeName(row, $event)" />
        </template>
        <template slot-scope="{ row }" slot="tableShow">
          <i-switch
            v-model="row.tableShow"
            @on-change="changeTableShow(row, $event)"
          >
            <span slot="open">开</span>
            <span slot="close">关</span>
          </i-switch>
        </template>
        <template slot-scope="{ row }" slot="editable">
          <i-switch
            v-model="row.editable"
            @on-change="changeEditable(row, $event)"
          >
            <span slot="open">开</span>
            <span slot="close">关</span>
          </i-switch>
        </template>
        <template slot-scope="{ row }" slot="type">
          <Select
            v-model="row.type"
            :disabled="!row.editable"
            @on-change="changeType(row, $event)"
            transfer
          >
            <Option value="text">文本输入框</Option>
            <Option value="textarea">多行文本输入框</Option>
            <Option value="select">选择下拉框</Option>
            <Option value="number">数字输入框</Option>
            <Option value="dict">数据字典选择组件</Option>
            <Option value="customList">自定义列表选择组件</Option>
            <Option value="date">日期选择器</Option>
            <Option value="datetime">日期时间选择器</Option>
            <Option value="daterange">日期范围选择器</Option>
            <Option value="upload">图片上传输入组件</Option>
            <Option value="uploadThumb">图片上传缩略图组件</Option>
            <Option value="fileUpload">文件上传/下载组件</Option>
            <Option value="switch">Switch开关</Option>
            <Option value="radio">Radio单选框</Option>
            <Option value="time">时间选择器</Option>
            <Option value="area">省市县级联</Option>
            <Option value="slider">Slider滑块</Option>
            <Option value="editor">富文本组件wangEditor</Option>
            <Option value="password">密码强度提示输入框</Option>
          </Select>
        </template>
        <template slot-scope="{ row }" slot="validate">
          <i-switch
            v-model="row.validate"
            @on-change="changeValidate(row, $event)"
            :disabled="!row.editable"
          >
            <span slot="open">是</span>
            <span slot="close">否</span>
          </i-switch>
        </template>
        <template slot-scope="{ row }" slot="searchable">
          <i-switch
            v-model="row.searchable"
            @on-change="changeSearchable(row, $event)"
          >
            <span slot="open">开</span>
            <span slot="close">关</span>
          </i-switch>
        </template>
        <template slot-scope="{ row }" slot="searchType">
          <Select
            v-model="row.searchType"
            @on-change="changeSearchType(row, $event)"
            :disabled="!row.searchable"
            transfer
          >
            <Option value="text">文本输入框</Option>
            <Option value="select">选择下拉框</Option>
            <Option value="dict">数据字典选择组件</Option>
            <Option value="customList">自定义列表选择组件</Option>
            <Option value="daterange" :disabled="daterangeSearch"
              >日期范围选择器</Option
            >
            <Option value="date">日期选择器</Option>
            <Option value="area">省市县级联</Option>
          </Select>
        </template>
        <template slot-scope="{ row }" slot="sortable">
          <i-switch
            v-model="row.sortable"
            @on-change="changeSortable(row, $event)"
          >
            <span slot="open">开</span>
            <span slot="close">关</span>
          </i-switch>
        </template>
        <template slot-scope="{ row }" slot="action">
          <a @click="edit(row)">编辑</a>
          <Divider type="vertical" />
          <a @click="remove(row)">删除</a>
        </template>
      </Table>
    </Card>

    <Modal
      :title="modalTitle"
      v-model="modalVisible"
      :mask-closable="false"
      :width="750"
    >
      <Form
        ref="form"
        :model="form"
        :label-width="100"
        :rules="formValidate"
        inline
      >
        <FormItem label="字段英文名" prop="field">
          <Tooltip placement="right" content="与后端实体字段匹配">
            <Input v-model="form.field" style="width: 245px" />
          </Tooltip>
        </FormItem>
        <FormItem label="字段中文名" prop="name">
          <Input v-model="form.name" style="width: 245px" />
        </FormItem>
        <FormItem label="表格中显示" prop="tableShow" style="width: 345px">
          <i-switch v-model="form.tableShow">
            <span slot="open">开</span>
            <span slot="close">关</span>
          </i-switch>
        </FormItem>
        <FormItem label="可添加编辑" prop="editable" style="width: 345px">
          <i-switch v-model="form.editable">
            <span slot="open">开</span>
            <span slot="close">关</span>
          </i-switch>
        </FormItem>
        <FormItem label="字段表单类型" prop="type" v-show="form.editable">
          <Select v-model="form.type" filterable transfer style="width: 245px">
            <Option value="text">文本输入框</Option>
            <Option value="textarea">多行文本输入框</Option>
            <Option value="select">选择下拉框</Option>
            <Option value="number">数字输入框</Option>
            <Option value="dict">数据字典选择组件</Option>
            <Option value="customList">自定义列表选择组件</Option>
            <Option value="date">日期选择器</Option>
            <Option value="datetime">日期时间选择器</Option>
            <Option value="daterange">日期范围选择器</Option>
            <Option value="upload">图片上传输入组件</Option>
            <Option value="uploadThumb">图片上传缩略图组件</Option>
            <Option value="fileUpload">文件上传/下载组件</Option>
            <Option value="switch">Switch开关</Option>
            <Option value="radio">Radio单选框</Option>
            <Option value="time">时间选择器</Option>
            <Option value="area">省市县级联</Option>
            <Option value="slider">Slider滑块</Option>
            <Option value="editor">富文本组件wangEditor</Option>
            <Option value="password">密码强度提示输入框</Option>
          </Select>
        </FormItem>
        <FormItem label="字典类型" prop="dictType" v-show="form.type == 'dict'">
          <customList
            v-model="form.dictType"
            filterable
            url="/dict/getAll"
            valueBind="type"
            description="type"
            style="width: 245px"
          />
        </FormItem>
        <FormItem
          label="自定义URL"
          prop="customUrl"
          v-show="form.type == 'customList'"
        >
          <Input
            v-model="form.customUrl"
            placeholder="输入自定义选择组件url属性"
            style="width: 245px"
          />
        </FormItem>
        <FormItem label="显示级别" prop="level" v-show="form.type == 'area'">
          <Select transfer v-model="form.level" style="width: 245px">
            <Option value="0">仅显示省</Option>
            <Option value="1">显示省和县</Option>
            <Option value="2">显示省市县</Option>
          </Select>
        </FormItem>
        <FormItem
          label="是否必填"
          prop="validate"
          v-show="form.editable"
          style="width: 345px"
        >
          <i-switch v-model="form.validate">
            <span slot="open">是</span>
            <span slot="close">否</span>
          </i-switch>
        </FormItem>
        <FormItem label="可搜索" prop="searchable" style="width: 345px">
          <i-switch v-model="form.searchable">
            <span slot="open">开</span>
            <span slot="close">关</span>
          </i-switch>
        </FormItem>
        <FormItem label="搜索框类型" prop="searchType" v-show="form.searchable">
          <Select v-model="form.searchType" transfer style="width: 245px">
            <Option value="text">文本输入框</Option>
            <Option value="select">选择下拉框</Option>
            <Option value="dict">数据字典选择组件</Option>
            <Option value="customList">自定义列表选择组件</Option>
            <Option value="daterange">日期范围选择器</Option>
            <Option value="date">日期选择器</Option>
            <Option value="area">省市县级联</Option>
          </Select>
        </FormItem>
        <FormItem
          label="字典类型"
          prop="searchDictType"
          v-show="form.searchType == 'dict'"
        >
          <customList
            v-model="form.searchDictType"
            filterable
            url="/dict/getAll"
            valueBind="type"
            description="type"
            style="width: 245px"
          />
        </FormItem>
        <FormItem
          label="自定义URL"
          prop="searchCustomUrl"
          v-show="form.searchType == 'customList'"
        >
          <Input
            v-model="form.searchCustomUrl"
            placeholder="输入自定义选择组件url属性"
            style="width: 245px"
          />
        </FormItem>
        <FormItem
          label="显示级别"
          prop="searchLevel"
          v-show="form.searchType == 'area'"
        >
          <Select v-model="form.searchLevel" transfer style="width: 245px">
            <Option value="0">仅显示省</Option>
            <Option value="1">显示省和县</Option>
            <Option value="2">显示省市县</Option>
          </Select>
        </FormItem>
        <FormItem label="可排序" prop="sortable" style="width: 345px">
          <i-switch v-model="form.sortable">
            <span slot="open">开</span>
            <span slot="close">关</span>
          </i-switch>
        </FormItem>
        <FormItem
          label="默认排序"
          prop="defaultSort"
          v-show="form.sortable"
          style="width: 345px"
        >
          <i-switch v-model="form.defaultSort">
            <span slot="open">开</span>
            <span slot="close">关</span>
          </i-switch>
        </FormItem>
        <FormItem
          label="默认排序方式"
          prop="defaultSortType"
          v-show="form.defaultSort && form.sortable"
        >
          <Select v-model="form.defaultSortType" transfer style="width: 245px">
            <Option value="desc">倒序(大到小)</Option>
            <Option value="asc">正序(小到大)</Option>
          </Select>
        </FormItem>
        <FormItem label="排序值" prop="sortOrder" style="width: 345px">
          <InputNumber v-model="form.sortOrder"></InputNumber>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="modalVisible = false">取消</Button>
        <Button type="primary" @click="handleSubmit">提交</Button>
      </div>
    </Modal>
    <Modal
      v-model="codeModal"
      :width="1000"
      :fullscreen="full"
      :styles="full ? {} : modalStyle"
    >
      <div slot="header">
        <div class="ivu-modal-header-inner">生成代码</div>
        <a @click="full = !full" class="modal-fullscreen">
          <Icon
            v-show="!full"
            type="ios-expand"
            class="model-fullscreen-icon"
          />
          <Icon
            v-show="full"
            type="ios-contract"
            class="model-fullscreen-icon"
          />
        </a>
        <a @click="codeModal = false" class="ivu-modal-close">
          <Icon type="ios-close" class="ivu-icon-ios-close" />
        </a>
      </div>
      <RadioGroup
        v-model="resultType"
        style="margin-bottom: 15px"
        @on-change="changeRadio"
      >
        <Radio label="drawerApi" border>抽屉组件(API)</Radio>
        <Radio label="drawer" border>抽屉组件(模拟请求)</Radio>
        <Radio label="singleApi" border>弹框(API)</Radio>
        <Radio label="single" border>弹框(模拟请求)</Radio>
        <Radio label="componentApi" border>动态组件(API)</Radio>
        <Radio label="component" border>动态组件(模拟请求)</Radio>
      </RadioGroup>
      <Tabs v-model="tabName" type="card" @on-click="changeCode">
        <TabPane name="index.vue" label="index.vue"></TabPane>
        <TabPane
          v-if="resultType == 'drawerApi' || resultType == 'drawer'"
          name="addEdit.vue"
          label="addEdit.vue"
        ></TabPane>
        <TabPane
          v-if="resultType == 'componentApi' || resultType == 'component'"
          name="add.vue"
          label="add.vue"
        ></TabPane>
        <TabPane
          v-if="resultType == 'componentApi' || resultType == 'component'"
          name="edit.vue"
          label="edit.vue"
        ></TabPane>
        <TabPane
          v-if="
            resultType == 'drawerApi' ||
            resultType == 'componentApi' ||
            resultType == 'singleApi'
          "
          name="api.js"
          label="api.js"
        ></TabPane>
      </Tabs>
      <Input
        v-if="!full"
        v-model="code"
        type="textarea"
        autosize
        style="max-height: 60vh; overflow: auto"
      />
      <Input v-if="full" v-model="code" :rows="32" type="textarea" />
      <div slot="footer">
        <Button
          v-clipboard:copy="code"
          v-clipboard:success="onCopy"
          v-clipboard:error="onError"
          type="success"
          icon="md-copy"
          >复制代码</Button
        >
        <Button type="primary" @click="download" icon="md-download"
          >下载代码</Button
        >
      </div>
    </Modal>
    <Modal v-model="entityModal" :width="700" :fullscreen="fullEntity">
      <div slot="header">
        <div class="ivu-modal-header-inner">自动读取字段</div>
        <a @click="fullEntity = !fullEntity" class="modal-fullscreen">
          <Icon
            v-show="!fullEntity"
            type="ios-expand"
            class="model-fullscreen-icon"
          />
          <Icon
            v-show="fullEntity"
            type="ios-contract"
            class="model-fullscreen-icon"
          />
        </a>
        <a @click="entityModal = false" class="ivu-modal-close">
          <Icon type="ios-close" class="ivu-icon-ios-close" />
        </a>
      </div>
      <Alert show-icon
        >输入实体类的引用路径，将自动读取其字段生成所需JSON配置数据，免去手动配置添加字段</Alert
      >
      <Form
        ref="entityForm"
        :model="entityForm"
        :label-width="130"
        :rules="entityFormValidate"
      >
        <FormItem label="实体类引用路径" prop="path">
          <Row type="flex" justify="space-between">
            <Input
              v-model="entityForm.path"
              placeholder="例如：cn.exrick.xboot.modules.base.entity.User"
              clearable
              style="width: 410px"
            />
            <Button type="warning" icon="md-play" @click="generateEntityData"
              >读取字段</Button
            >
          </Row>
        </FormItem>
      </Form>
      <Input
        v-if="!fullEntity"
        v-model="entityData"
        type="textarea"
        autosize
        style="max-height: 50vh; overflow: auto"
        placeholder="生成结果"
      />
      <Input
        v-if="fullEntity"
        v-model="entityData"
        :rows="32"
        type="textarea"
      />
      <div slot="footer">
        <Button
          type="primary"
          icon="md-checkmark-circle-outline"
          @click="submitEntityData"
          >确认提交</Button
        >
      </div>
    </Modal>
  </div>
</template>

<script>
import { generateTable, getEntityData } from "@/api/index";
import customList from "@/views/my-components/xboot/custom-list";
import FileSaver from "file-saver";
export default {
  name: "table-generator",
  components: {
    customList,
  },
  data() {
    return {
      resultType: "drawerApi",
      tabName: "index.vue",
      modalStyle: {
        top: "30px",
      },
      entityModal: false,
      fullEntity: false,
      entityData: "",
      entityForm: {
        path: "",
      },
      loading: false,
      code: "",
      vueName: "",
      rowNum: "1",
      full: false,
      codeModal: false,
      modalVisible: false,
      modalType: 0,
      modalTitle: "",
      form: {
        sortOrder: 0,
        field: "",
        name: "",
        dictType: "",
        customUrl: "",
        searchDictType: "",
        searchCustomUrl: "",
        level: "2",
        tableShow: true,
        editable: true,
        type: "text",
        searchType: "text",
        searchLevel: "2",
        validate: true,
        searchable: false,
        sortable: false,
        defaultSort: false,
        defaultSortType: "desc",
      },
      formValidate: {
        field: [{ required: true, message: "不能为空", trigger: "change" }],
        name: [{ required: true, message: "不能为空", trigger: "change" }],
      },
      entityFormValidate: {
        path: [{ required: true, message: "不能为空", trigger: "change" }],
      },
      columns: [
        // 表头
        {
          title: "排序",
          key: "sortOrder",
          sortType: "asc",
          sortable: true,
          align: "center",
          minWidth: 90,
        },
        {
          title: "字段英文名",
          slot: "field",
          minWidth: 150,
        },
        {
          title: "字段中文名",
          slot: "name",
          minWidth: 150,
        },
        {
          title: "表格中显示",
          slot: "tableShow",
          align: "center",
          minWidth: 110,
        },
        {
          title: "可添加编辑",
          slot: "editable",
          align: "center",
          minWidth: 110,
        },
        {
          title: "表单类型",
          slot: "type",
          minWidth: 200,
        },
        {
          title: "是否必填",
          slot: "validate",
          align: "center",
          minWidth: 100,
        },
        {
          title: "可搜索",
          slot: "searchable",
          align: "center",
          minWidth: 100,
        },
        {
          title: "搜索框类型",
          slot: "searchType",
          minWidth: 200,
        },
        {
          title: "可排序",
          slot: "sortable",
          align: "center",
          minWidth: 80,
        },
        {
          title: "操作",
          slot: "action",
          align: "center",
          fixed: "right",
          width: 120,
        },
      ],
      data: [],
      daterangeSearch: false,
      result: {},
    };
  },
  methods: {
    init() {
      // 取缓存数据
      let data = this.getStore("tableData");
      let vueName = this.getStore("tableVueName");
      let rowNum = this.getStore("tableRowNum");
      let daterangeSearch = this.getStore("tableDaterangeSearch");
      if (data && data != "undefined") {
        this.data = JSON.parse(data);
      }
      if (vueName && vueName != "undefined") {
        this.vueName = vueName;
      }
      if (rowNum && rowNum != "undefined") {
        this.rowNum = rowNum;
      }
      if (daterangeSearch && daterangeSearch != "undefined") {
        this.daterangeSearch = eval(daterangeSearch);
      }
    },
    generateEntityData() {
      this.$refs.entityForm.validate((valid) => {
        if (valid) {
          getEntityData({
            path: this.entityForm.path,
          }).then((res) => {
            if (res.success) {
              this.entityData = res.result;
            }
          });
        }
      });
    },
    submitEntityData() {
      if (!this.entityData) {
        this.$Message.warning("请先输入实体类引用路径生成JSON数据");
        return;
      }
      try {
        let data = JSON.parse(this.entityData);
        this.data = data.data;
        this.entityModal = false;
      } catch (e) {
        this.$Message.error("请确保JSON数据格式正确");
      }
    },
    preview() {
      this.$router.push({
        name: "search-table",
      });
    },
    changeField(row, v) {
      for (let attr in row) {
        if (row[attr] == null) {
          row[attr] = "";
        }
      }
      let str = JSON.stringify(row);
      let data = JSON.parse(str);
      data.field = v.target.value;
      this.data.splice(row._index, 1, data);
      this.save();
    },
    changeName(row, v) {
      for (let attr in row) {
        if (row[attr] == null) {
          row[attr] = "";
        }
      }
      let str = JSON.stringify(row);
      let data = JSON.parse(str);
      data.name = v.target.value;
      this.data.splice(row._index, 1, data);
      this.save();
    },
    changeTableShow(row, v) {
      for (let attr in row) {
        if (row[attr] == null) {
          row[attr] = "";
        }
      }
      let str = JSON.stringify(row);
      let data = JSON.parse(str);
      data.tableShow = v;
      this.data.splice(row._index, 1, data);
      this.save();
    },
    changeType(row, v) {
      for (let attr in row) {
        if (row[attr] == null) {
          row[attr] = "";
        }
      }
      let str = JSON.stringify(row);
      let data = JSON.parse(str);
      data.type = v;
      this.data.splice(row._index, 1, data);
      this.save();
    },
    changeEditable(row, v) {
      for (let attr in row) {
        if (row[attr] == null) {
          row[attr] = "";
        }
      }
      let str = JSON.stringify(row);
      let data = JSON.parse(str);
      data.editable = v;
      this.data.splice(row._index, 1, data);
      this.save();
    },
    changeValidate(row, v) {
      for (let attr in row) {
        if (row[attr] == null) {
          row[attr] = "";
        }
      }
      let str = JSON.stringify(row);
      let data = JSON.parse(str);
      data.validate = v;
      this.data.splice(row._index, 1, data);
      this.save();
    },
    changeSearchable(row, v) {
      for (let attr in row) {
        if (row[attr] == null) {
          row[attr] = "";
        }
      }
      let str = JSON.stringify(row);
      let data = JSON.parse(str);
      data.searchable = v;
      this.data.splice(row._index, 1, data);
      this.save();
    },
    changeSearchType(row, v) {
      for (let attr in row) {
        if (row[attr] == null) {
          row[attr] = "";
        }
      }
      let str = JSON.stringify(row);
      let data = JSON.parse(str);
      data.searchType = v;
      this.data.splice(row._index, 1, data);
      if (this.daterangeSearch && v != "daterange") {
        this.daterangeSearch = false;
      } else if (v == "daterange") {
        this.daterangeSearch = true;
      }
      this.save();
    },
    changeSortable(row, v) {
      for (let attr in row) {
        if (row[attr] == null) {
          row[attr] = "";
        }
      }
      let str = JSON.stringify(row);
      let data = JSON.parse(str);
      data.sortable = v;
      this.data.splice(row._index, 1, data);
      this.save();
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 转换null为""
          let v = this.form;
          for (let attr in v) {
            if (v[attr] == null) {
              v[attr] = "";
            }
          }
          let str = JSON.stringify(v);
          let data = JSON.parse(str);
          // 判断时间范围搜索
          if (this.daterangeSearch && data.searchType == "daterange") {
            this.$Message.warning(
              "已设定了日期范围搜索的字段，日期范围搜索暂仅支持设定1个"
            );
            return;
          }
          if (this.modalType == 0) {
            this.data.push(data);
            this.data = this.data;
          } else {
            this.data.splice(v._index, 1, data);
          }
          // 记录日期范围
          if (data.searchType == "daterange") {
            this.daterangeSearch = true;
          }
          this.save();
          this.modalVisible = false;
        }
      });
    },
    add() {
      this.modalType = 0;
      this.modalTitle = "添加字段";
      this.$refs.form.resetFields();
      this.form.sortOrder = this.data.length + 1;
      this.modalVisible = true;
    },
    edit(v) {
      this.modalType = 1;
      this.modalTitle = "编辑字段";
      // 转换null为""
      for (let attr in v) {
        if (v[attr] == null) {
          v[attr] = "";
        }
      }
      let str = JSON.stringify(v);
      let data = JSON.parse(str);
      this.form = data;
      this.modalVisible = true;
    },
    remove(v) {
      this.data.splice(v._index, 1);
      this.save();
      this.$Message.success("操作成功");
    },
    clear() {
      this.$Modal.confirm({
        title: "确认清空",
        content: "您确认要清空所有数据 ?",
        onOk: () => {
          this.data = [];
          this.vueName = "";
          this.rowNum = "1";
          this.daterangeSearch = false;
          this.save();
          this.$Message.success("操作成功");
        },
      });
    },
    generate() {
      if (!this.vueName) {
        this.$Message.warning("请输入组件名");
        return;
      }
      // 检查默认排序个数
      let count = 0;
      this.data.forEach((e) => {
        if (e.defaultSort) {
          count++;
        }
      });
      if (count > 1) {
        this.$Message.warning("默认排序字段仅能设置一个，请勿设置多个");
        return;
      }
      this.loading = true;
      generateTable(this.vueName, this.rowNum, this.data).then((res) => {
        this.loading = false;
        if (res.success) {
          this.result = res.result;
          this.changeCode();
          this.codeModal = true;
          this.save();
        }
      });
    },
    changeRadio() {
      this.tabName = "index.vue";
      this.changeCode();
    },
    changeCode() {
      if (this.resultType == "drawerApi") {
        if (this.tabName == "index.vue") {
          this.code = this.result.drawerApi;
        }
        if (this.tabName == "addEdit.vue") {
          this.code = this.result.addEditApi;
        }
        if (this.tabName == "api.js") {
          this.code = this.result.api;
        }
      }
      if (this.resultType == "drawer") {
        if (this.tabName == "index.vue") {
          this.code = this.result.drawer;
        }
        if (this.tabName == "addEdit.vue") {
          this.code = this.result.addEdit;
        }
      }
      if (this.resultType == "componentApi") {
        if (this.tabName == "index.vue") {
          this.code = this.result.componentApi;
        }
        if (this.tabName == "add.vue") {
          this.code = this.result.addApi;
        }
        if (this.tabName == "edit.vue") {
          this.code = this.result.editApi;
        }
        if (this.tabName == "api.js") {
          this.code = this.result.api;
        }
      }
      if (this.resultType == "component") {
        if (this.tabName == "index.vue") {
          this.code = this.result.component;
        }
        if (this.tabName == "add.vue") {
          this.code = this.result.add;
        }
        if (this.tabName == "edit.vue") {
          this.code = this.result.edit;
        }
      }
      if (this.resultType == "singleApi") {
        if (this.tabName == "index.vue") {
          this.code = this.result.singleApi;
        }
        if (this.tabName == "api.js") {
          this.code = this.result.api;
        }
      }
      if (this.resultType == "single") {
        this.code = this.result.single;
      }
    },
    onCopy() {
      this.$Message.success("复制成功");
    },
    onError() {
      this.$Message.warning("复制失败，请手动复制");
    },
    download() {
      var blob = new Blob([this.code], {
        type: "text/plain;charset=utf-8",
      });
      FileSaver.saveAs(blob, this.tabName);
    },
    save() {
      this.setStore("tableData", JSON.stringify(this.data));
      this.setStore("tableVueName", this.vueName);
      this.setStore("tableRowNum", this.rowNum);
      this.setStore("tableDaterangeSearch", this.daterangeSearch);
    },
  },
  created() {
    this.init();
  },
};
</script>